Feature · form-builder
Form builder
Assemble a form from a palette of fields and configure each one, with the live form beside you.
Drag a field in
loop runs on screen
A Phone field is picked up from the palette and dropped between Email and Message; the loop alternates so it is dragged back out. Composition.
views/components/visuals/form-builder/v1.html
Static · three placements
Fields
Name
Phone
Message
Fields
Name
Phone
Message
Fields
Name
Phone
Message
Animated · loop
Fields
Name
Phone
Message
Field settings
once one pass, holds
A Budget select is selected; Required flips on and the asterisk lands in the form, an option is typed, Apply flashes. Configuration.
views/components/visuals/form-builder/v2.html
Static · three placements
Name
Budget*
Message
Budget · Select
Label
Required
Options
Name
Budget*
Message
Budget · Select
Label
Required
Options
Name
Budget*
Message
Budget · Select
Label
Required
Options
Animated · once
Name
Budget*
Message
Budget · Select
Label
Required
Options
Add a field
cutoutonce one pass, holds
Cutout on the collections navy ground: a project's admin panel on a form's Fields tab (Project enquiry), with Cancel, Save and the Fields / Settings tabs, cropped at the right and running off the bottom. The cursor arrives on Add field, the button takes its hover shade, a press, and a Phone field lands at the bottom of the list with a tint flash while Add field slides down. The list is shortened so the new field and the button stay in frame: Name and Email at card, Company from row, the sidebar at hero.
views/components/visuals/form-builder/c1.html
Static · three placements
General
Blogs
Collections
Project enquiry
name
company
phone
General
Blogs
Collections
Project enquiry
name
company
phone
General
Blogs
Collections
Project enquiry
name
company
phone
Animated · once
General
Blogs
Collections
Project enquiry
name
company
phone
Overrides none — the file's own defaults